/**
 * @class Ext.field.Checkbox
 */

@mixin checkmark($color: #000){
    @extend .x-checkmark-base;
    color: $color;
}

.x-checkmark-base {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    content: '3';
    font-family: 'Pictos';
    font-size: 1.6em;
    text-align: right;
    line-height: 1.6em;
}

.x-field-checkbox .x-input-el {
    position: relative;

    &:after {
        @include checkmark($form-light);
    }

    &:checked:after {
        @include checkmark($active-color);
    }
}

.x-item-disabled {
    &.x-field-checkbox {
        .x-input-el {
            &:checked:after {
                background: mix($form-light, $active-color, 60);
            }
        }
    }
}